<template>
  <div class="permissions">
    <el-card>
      <!-- 输入框 -->
      <div class="search">
        <el-row>
          <el-col :span="6">
            <el-input v-model="searchVal" placeholder="根据用户名搜索"></el-input>
          </el-col>
          <el-col :span="6" class="search_btn">
            <el-button @click="clearVal">清空</el-button>
            <el-button type="primary" plain @click="searchUser">搜索</el-button>
          </el-col>
          <el-col :span="11" class="new_add">
            <el-button type="success" icon="el-icon-edit" @click="addUser">新增权限组</el-button>
          </el-col>
        </el-row>
      </div>

      <el-alert class="total_message" type="info" :closable="false">
        <i class="el-icon-info"></i>
        共{{ count }}条数据
      </el-alert>
      <!-- 表格 -->
      <el-table :data="userTables" style="width: 100%">
        <el-table-column type="selection" width="350"> </el-table-column>
        <el-table-column prop="title" label="用户名" width="250"> </el-table-column>
        <el-table-column prop="update_date" label="日期" sortable align="center"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" plain icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="quertParams.page"
        :page-sizes="[10, 20]"
        :page-size="quertParams.pagesize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="count"
      >
      </el-pagination>
    </el-card>

    <!-- 修改信息弹框 -->
    <el-dialog title="编辑权限组" :visible.sync="editDialogVisible" width="50%" close="editCloseDialog">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRefs" label-width="100px" class="edit_form">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <span>暂无数据</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editForm_btn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加信息弹框 -->
    <el-dialog title="创建权限组" :visible.sync="addDialogVisible" width="50%" close="addCloseDialog">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRefs" label-width="100px" class="edit_form">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <span>暂无数据</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addForm_btn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, detail, update, add } from '@/api/base/permissions'

export default {
  name: 'permissions',
  data () {
    return {
      // 搜索框的值
      searchVal: '',
      // 表格参数
      quertParams: {
        page: 1,
        pagesize: 10,
        title: ''
      },
      // 数据总数
      count: 0,
      // 表格列表
      userTables: [],
      // 修改信息弹框
      editDialogVisible: false,
      editForm: {
        id: 0,
        title: ''
      },
      editFormRules: {
        title: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      },
      // 添加信息弹框
      addDialogVisible: false,
      addForm: {
        permissions: []
      },
      addFormRules: {
        title: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    this.getUserList()
  },

  methods: {
    async getUserList () {
      const res = await list(this.quertParams)
      res.data.list.forEach(item => {
        item.update_date = this.$dayjs(item.update_date).format('YYYY-MM-DD')
      })
      // console.log(res.data.list)
      this.userTables = res.data.list
      this.count = res.data.counts
    },
    // 修改
    async handleEdit (row) {
      this.editDialogVisible = true
      const res = await detail(row)
      // console.log(res)
      this.editForm = res.data
    },
    // 确认修改
    async editForm_btn () {
      // console.log(this.editForm)
      const res = await update(this.editForm)
      console.log(res)
      if (res.status !== 200) return this.$message.warning('修改失败!')
      this.$message.success('修改成功!')
      this.getUserList()
    },
    // 关闭修改弹框
    editCloseDialog () {
      this.$refs.editFormRefs.resetFields()
    },
    // 删除
    async handleDelete (row) {
      // console.log(row)
      // const id = row.id
      const resultConfirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (resultConfirm !== 'confirm') return this.$message.info('已取消删除!')
      const res = await remove(row)
      // console.log(res)
      if (res.status !== 200) return this.$message.warning('删除失败!')
      this.$message.success('删除成功!')
      this.getUserList()
    },
    // 分页
    handleSizeChange (newPagesize) {
      this.quertParams.pagesize = newPagesize
      this.getUserList()
    },
    handleCurrentChange (newPage) {
      this.quertParams.page = newPage
      console.log(this.quertParams.page)
      this.getUserList()
    },
    // 清空输入框的值
    clearVal () {
      this.searchVal = ''
      this.quertParams.title = ''
      this.getUserList()
    },
    // 搜索
    searchUser () {
      const val = this.searchVal
      this.quertParams.title = val
      this.getUserList()
    },
    // 添加用户
    addUser () {
      this.addDialogVisible = true
    },
    addCloseDialog () {
      this.$refs.addFormRefs.resetFields()
    },
    async addForm_btn () {
      try {
        await add(this.addForm)
        // console.log(res)
        this.getUserList()
        this.$message.success('添加成功!')
      } catch (err) {
        // console.log(err)
        this.$message.warning('服务器出错了,但还是添加成功了')
      }
      this.addDialogVisible = false
    }
  }
}
</script>

<style scoped lang='less'>
.el-card {
  margin: 20px;
  .search {
    // display: flex;
    // justify-content: space-between;
    .el-row {
      margin-bottom: 20px;
      .search_btn {
        margin-left: 20px;
      }
      .new_add {
        text-align: right;
      }
    }
  }
  .el-alert {
    margin-bottom: 20px;
  }
  /deep/ .el-alert__description {
    font-size: 13px;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }
}
.edit_form {
  width: 60%;
  margin: auto;
  text-align: center;
}
</style>
